﻿<%@ taglib uri="/mytaglib" prefix="ct"%>
<%@ include file="/includes.jsp"%>
<script>
	$(document).ready(function() {
		
		$(".select2").select2({
			language : "zh-CN"
		});

		function format1(state) {
			if (!state.id)
				return state.text; // optgroup

			return state.id;
		}

		$("#permissionIcon").select2({
			language : "zh-CN",
			templateResult : format1,
			templateSelection : format1,
			escapeMarkup : function(m) {
				return m;
			},
			minimumResultsForSearch : Infinity
		});

		$("button").click(function(event) {
			event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用
		});
	});

	function toAdd(id) {
		//$("#permissionType").val('0').trigger("change");
		$("#permissionType").select2("val", "0");
		$("#permissionType").prop("disabled", false);
		$("#permissionIcon").prop("disabled", false);
		$("#permissionIcon").select2("val", "<i class='fa fa-book'></i>");
		document.getElementById("editPermissionForm").reset();
		myValidate.resetForm();
		$(".has-error").removeClass('has-error');
		changeType();
		if (!(id === undefined) && id != '') {
			$("#parentId").select2("val", id);
		} else {
			$("#parentId").select2("val", "0");
		}
		$("#editModalLabel").text("新增");
		$("#editSaveBtn").show();
		$("#editSaveBtn").attr("onclick", "saveAdd()");
		$('#editModal').removeClass("modal-warning");
		$('#editModal').removeClass("modal-info");
		
		$('#editModal').modal('show');
	}

	function toModify(id) {
		myAjaxSumbmit('', '/permission/ajax/entity?permissionId=' + id, '', function(
				data) {

			document.getElementById("editPermissionForm").reset();
			myValidate.resetForm();
			$('#permissionId').val(id);

			$('#permissionName').val(data.permissionName);
			$("#parentId").select2("val", data.parentId);
			$("#permissionType").select2("val", data.permissionType);
			$("#permissionType").prop("disabled", true);
			changeType();

			$('#sort').val(data.sort);
			$("#permissionIcon").select2("val", data.permissionIcon);
			$("#permissionIcon").prop("disabled", false);

			$('#permissionDesc').val(data.permissionDesc);
			$('#permissionCode').val(data.permissionCode);
			$('#permissionUrl').val(data.permissionUrl);

			$("#editModalLabel").text("修改");
			$('#editModal').addClass("modal-warning");
			$('#editModal').removeClass("modal-info");
			
			$("#editSaveBtn").attr("onclick", "modify(" + id + ")");
			$("#editSaveBtn").show();
			$(".has-error").removeClass('has-error');
			$('#editModal').modal('show');

		});
	}

	function showDetail(id) {
		myAjaxSumbmit('', '/permission/ajax/entity?permissionId=' + id, '', function(
				data) {

			document.getElementById("editPermissionForm").reset();
			myValidate.resetForm();

			$('#permissionName').val(data.permissionName);
			$("#parentId").select2("val", data.parentId);
			$("#permissionType").select2("val", data.permissionType);
			$("#permissionType").prop("disabled", true);
			changeType();

			$('#sort').val(data.sort);
			$("#permissionIcon").select2("val", data.permissionIcon);

			$('#permissionDesc').val(data.permissionDesc);
			$('#permissionCode').val(data.permissionCode);
			$('#permissionUrl').val(data.permissionUrl);

			$("#editModalLabel").text("查看");

			$("#editSaveBtn").hide();

			$(".has-error").removeClass('has-error');
			$('#editModal').removeClass("modal-warning");
			$('#editModal').addClass("modal-info");

			$('#editModal').modal('show');

		});
	}

	function delConfirm(id) {
		$("#delConfirmContent").html("确认删除这个权限？");
		$("#delConfirmButton").attr("onclick", "del(" + id + ")");
		$('#delModal').modal('show');
	}

	function del(id) {

		if (!(id === undefined) && id != '') {
			myAjaxSumbmit('noData',
					'/permission/ajax/del?permissionId=' + id, '',
					function() {
						$("#permission" + id).remove();
						$('#delModal').modal('hide');

					});
		} else {
			alert("请选择删除项！");
		}
	}

	function changeType() {
		if ($("#permissionType").select2("val") == 1) {
			$("#urlDiv").show();
		} else {
			$("#urlDiv").hide();
		}
	}

	var form = $("#editPermissionForm");
	var myValidate = form
			.validate({
				showErrors : function(errorMap, errorList) {
					for (var i = 0; i < errorList.length; i++) {
						$(errorList[i].element).parent().parent().addClass(
								'has-error');
					}
					this.defaultShowErrors();
				},
				success : function(label, element) {
					$(element).parent().parent().removeClass('has-error');
				}
			});

	function saveAdd() {
		if (form.valid()) {
			myAjaxSumbmit('editPermissionForm',
					'/permission/ajax/save',
					'/permission/list', function() {
						$('#editModal').modal('hide');
					});
		}
	}

	function modify(id) {
		if (!(id === undefined) && id != '') {
			if (form.valid()) {
				myAjaxSumbmit('editPermissionForm',
						'/permission/ajax/update',
						'/permission/list', function() {
							$('#editModal').modal('hide');
						});
			}
		} else {
			alert("请选择修改项！");
		}
	}
	
	
</script>



<div class="box-header">
	<h3 class="box-title">权限管理列表</h3>
	<div class="box-tools">
		<button type="button" onclick="toAdd()" class="btn btn-primary btn-flat">新增</button>
		<!-- <div style="width: 150px;" class="input-group">
                      <input type="text" placeholder="Search" class="form-control input-sm pull-right" name="table_search">
                      <div class="input-group-btn">
                        <button type="button" class="btn btn-sm btn-default"><i class="fa fa-search"></i></button>
                      </div>
                    </div> -->
	</div>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive no-padding">

	<ct:permissionTableTag />

</div>
<!-- /.box-body -->

<!-- Modal -->
<div class="modal fade " id="editModal" role="dialog" aria-labelledby="editModalLabel" data-backdrop="false">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal('editModal')">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="editModalLabel">新增</h4>
			</div>
			<div class="modal-body" id="editModalBody">
				<form class="form-horizontal" id="editPermissionForm">
					<input type="hidden" id="permissionId" name="permissionId">
					<div class="box-body">
						<div class="form-group ">
							<label for="permissionName" class="col-sm-2 control-label">权限名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="permissionName" name="permissionName" placeholder="权限名称" required="required">
							</div>
						</div>
						<div class="row">
							<div class=" col-sm-4">
								<div class="form-group">
									<label for="permissionType" class="col-sm-6 control-label">权限类型</label>
									<div class="col-sm-6">
										<select class="form-control select2" style="width: 100%;" id="permissionType" name="permissionType" onchange="changeType()">
											<option selected="selected" value="0">目录</option>
											<option value="1">页面</option>
											<option value="2">按钮</option>
											<option value="3">其他</option>
										</select>
									</div>
								</div>
							</div>

							<div class=" col-sm-8">
								<div class="form-group">
									<label for="parentId" class="col-sm-4 control-label">所属目录</label>
									<div class="col-sm-8">
										<ct:categoryPermissionsTag />
									</div>
								</div>
							</div>
						</div>

						<div class="form-group" id="urlDiv">
							<label for="permissionUrl" class="col-sm-2 control-label">页面URL</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="permissionUrl" name="permissionUrl" placeholder="页面URL">
							</div>
						</div>

						<div class="row">
							<div class=" col-sm-4">
								<div class="form-group">
									<label for="sort" class="col-sm-6 control-label">显示顺序</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" id="sort" name="sort" placeholder="显示顺序" value="1">
									</div>
								</div>
							</div>
							<div class=" col-sm-8">
								<div class="form-group">
									<label for="permissionIcon" class="col-sm-4 control-label">图标</label>
									<div class="col-sm-3">
										<select class="form-control" style="width: 100%;" id="permissionIcon" name="permissionIcon">
											<option value="<i class='fa fa-book'></i>"></option>
											<option value="<i class='fa fa-circle-o'></i>"></option>
											<option value="<i class='fa fa-envelope'></i>"></option>
											<option value="<i class='fa fa-folder'></i>"></option>
											<option value="<i class='fa fa-table'></i>"></option>
											<option value="<i class='fa fa-calendar'></i>"></option>
											<option value="<i class='fa fa-users'></i>"></option>
										</select>
									</div>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label for="permissionDesc" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="permissionDesc" name="permissionDesc" placeholder="描述" >
							</div>
						</div>

						<div class="form-group">
							<label for="permissionCode" class="col-sm-2 control-label">页面标题</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="permissionCode" name="permissionCode" placeholder="页面标题">
							</div>
						</div>

					</div>
					<!-- /.box-body -->
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default " data-dismiss="modal" onclick="closeModal('editModal')">关闭</button>
				<button type="button" class="btn btn-primary" onclick="saveAdd()" id="editSaveBtn">保存</button>
			</div>

		</div>
	</div>
</div>





